<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>北京不同类型公交线路</title>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .demo-title {
      position: absolute;
      top: 25px;
      left: 25px;
      z-index: 1;
    }

    h1 {
      font-size: 18px;
      margin: 0;
      color: rgb(180, 180, 190);
    }

    h3 {
      font-size: 12px;
      font-weight: normal;
      margin-top: 5px;
      color: rgb(150,150,150);
    }
  </style>
</head>

<body>
<div class="demo-title">
  <h1>北京公交线路行驶路线分类</h1>
  <h3>北京全市范围内各公交线路运行情况</h3>
</div>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=bb41c485d4ac778506ace9402efd9cb1&plugin=AMap.Scale,AMap.ToolBar"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=bb41c485d4ac778506ace9402efd9cb1"></script>
<script>
  var map = ( new AMap.Map('map', {
    zoom: 11.2,
    center: [116.352734,39.8447],
    showLabel: false,
    viewMode: '3D',
    mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
    pitch: 50,
  }));

  var loca = new Loca.Container({
    map,
  });
  window._loca = loca;

  var geo = new Loca.GeoJSONSource({
    url: './bj_bus.json',
  });

  var layer = new Loca.PulseLineLayer({
    // loca,
    zIndex: 10,
    opacity: 1,
    visible: true,
    zooms: [2, 22],
  });

  var headColors = ['#EFBB51', '#7F3CFF', '#4CC19B', '#0B5D74', '#E06AC4', '#223F9B', '#F15C1A', '#7A0FA6'];

  console.log('geo', geo);
  layer.setSource(geo);
  layer.setStyle({
    altitude: 0,
    lineWidth: 2,
    // 脉冲头颜色
    headColor: (_, feature) => {
      return headColors[feature.properties.type - 1];
    },
    // 脉冲尾颜色
    trailColor: 'rgba(128, 128, 128, 0.5)',
    // 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
    interval: 0.25,
    // 脉冲线的速度，几秒钟跑完整段路
    duration: 5000,
  });
  loca.add(layer);
  loca.animate.start();

  // 图例
  var lengend = new Loca.Legend({
    loca: loca,
    title: {
      label: '公交类型',
      fontColor: 'rgba(255,255,255,0.4)',
      fontSize: '16px'
    },
    style: {
      backgroundColor: 'rgba(255,255,0,0.6)',
      left: '20px',
      bottom: '40px',
      fontSize: '12px'
    },
    dataMap: [
      { label: 'A类型', color: headColors[7] },
      { label: 'B类型', color: headColors[6] },
      { label: 'C类型', color: headColors[5] },
      { label: 'D类型', color: headColors[4] },
      { label: 'E类型', color: headColors[3] },
      { label: 'F类型', color: headColors[2] },
      { label: 'G类型', color: headColors[1] },
      { label: 'H类型', color: headColors[0] },
    ],
  });

  loca.animate.start();
  var dat = new Loca.Dat();
  dat.addLayer(layer, '公交');

</script>
</body>
</html>
